<template>
  <div class="settings-container">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <h2>应用设置</h2>
        </div>
      </template>
      
      <el-form :model="settingsForm" label-width="120px">
        <el-form-item label="自动启动服务">
          <el-switch v-model="settingsForm.autoStartService" />
          <div class="form-item-desc">应用启动时自动启动微信服务</div>
        </el-form-item>
        
        <el-form-item label="禁止微信更新">
          <el-switch v-model="settingsForm.disableWechatUpdate" />
          <div class="form-item-desc">写入注册表配置，禁止微信自动更新</div>
        </el-form-item>
        
        <el-form-item label="自动重启服务">
          <el-switch v-model="settingsForm.autoRestartService" />
          <div class="form-item-desc">微信服务崩溃时自动重启</div>
        </el-form-item>
        
        <el-form-item label="最大重启次数">
          <el-input-number v-model="settingsForm.maxRestartAttempts" :min="1" :max="10" />
          <div class="form-item-desc">服务崩溃后最大重启尝试次数</div>
        </el-form-item>
        
        <el-form-item label="日志保留天数">
          <el-input-number v-model="settingsForm.logRetentionDays" :min="1" :max="30" />
          <div class="form-item-desc">日志文件保留的最大天数</div>
        </el-form-item>
        
        <el-form-item label="API地址">
          <el-input v-model="settingsForm.apiUrl" placeholder="http://localhost:7600" />
          <div class="form-item-desc">微信服务API地址</div>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveSettings" :loading="isSaving">保存设置</el-button>
          <el-button @click="resetSettings">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <h2>关于应用</h2>
        </div>
      </template>
      
      <div class="about-content">
        <h3>微信消息转发助手</h3>
        <p>版本: 1.0.0</p>
        <p>这是一个专注于将微信群内特定用户的消息转发给他人的桌面应用。</p>
        <p>基于 Electron 和 Vue 开发，使用 wrest.exe 提供的接口服务。</p>
        
        <div class="system-info">
          <h4>系统信息</h4>
          <p>操作系统: {{ systemInfo.os }}</p>
          <p>微信版本: {{ systemInfo.wechatVersion }}</p>
          <p>服务状态: {{ wechatStore.isRunning ? '运行中' : '已停止' }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useWechatStore } from '../store';
import { ElMessage } from 'element-plus';

const wechatStore = useWechatStore();
const isSaving = ref(false);

// 设置表单
const settingsForm = reactive({
  autoStartService: true,
  disableWechatUpdate: true,
  autoRestartService: true,
  maxRestartAttempts: 5,
  logRetentionDays: 7,
  apiUrl: 'http://localhost:7600'
});

// 系统信息
const systemInfo = reactive({
  os: 'Windows',
  wechatVersion: '3.9.10.27',
});

// 加载设置
function loadSettings() {
  const savedSettings = localStorage.getItem('app-settings');
  if (savedSettings) {
    try {
      const parsedSettings = JSON.parse(savedSettings);
      Object.assign(settingsForm, parsedSettings);
    } catch (error) {
      console.error('加载设置失败:', error);
    }
  }
}

// 保存设置
async function saveSettings() {
  isSaving.value = true;
  try {
    localStorage.setItem('app-settings', JSON.stringify(settingsForm));
    
    // 如果启用了禁止微信更新，则调用主进程方法
    if (settingsForm.disableWechatUpdate) {
      try {
        await window.electronAPI.disableWechatUpdate();
      } catch (error) {
        console.error('禁用微信更新失败:', error);
      }
    }
    
    ElMessage.success('设置已保存');
  } catch (error) {
    ElMessage.error(`保存设置失败: ${error.message}`);
  } finally {
    isSaving.value = false;
  }
}

// 重置设置
function resetSettings() {
  settingsForm.autoStartService = true;
  settingsForm.disableWechatUpdate = true;
  settingsForm.autoRestartService = true;
  settingsForm.maxRestartAttempts = 5;
  settingsForm.logRetentionDays = 7;
  settingsForm.apiUrl = 'http://localhost:7600';
  
  ElMessage.success('设置已重置');
}

// 组件挂载时
onMounted(() => {
  loadSettings();
});
</script>

<style scoped>
.settings-container {
  max-width: 800px;
  margin: 0 auto;
}

.settings-card, .about-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-item-desc {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}

.about-content {
  padding: 10px 0;
}

.system-info {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
</style> 